@for $i from 1 through 21 {
  .p-#{$i} {
    padding: #{$i * 0.2}rem;
  }
  .pl-#{$i} {
    padding-left: #{$i * 0.2}rem;
  }
  .pr-#{$i} {
    padding-right: #{$i * 0.2}rem;
  }
  .pt-#{$i} {
    padding-top: #{$i * 0.2}rem;
  }
  .pb-#{$i} {
    padding-bottom: #{$i * 0.2}rem;
  }

  .m-#{$i} {
    padding: #{$i * 0.2}rem;
  }
  .ml-#{$i} {
    padding-left: #{$i * 0.2}rem;
  }
  .mr-#{$i} {
    padding-right: #{$i * 0.2}rem;
  }
  .mt-#{$i} {
    padding-top: #{$i * 0.2}rem;
  }
  .mb-#{$i} {
    padding-bottom: #{$i * 0.2}rem;
  }

  .fs-#{$i} {
    font-size: #{$i * 0.5}rem;
  }

  .col-#{$i} {
    width: #{$i * 3}vw;
  }

  .tl {
    text-align: left;
  }

  .tr {
    text-align: right;
  }

  .tc {
    text-align: center;
  }

  body {
    margin: 0px;
  }
}
